<template>
    <div class="bobxxxssw">
        <!-- 下面第一个图表 -->
        <div id="main3"></div>
        <loading :text="loadingText" v-if="loading"></loading>
    </div>
</template>
<script>
import * as echarts from "echarts";
import axios from "axios";
import loading from './Loading'

export default {
    components: {
        loading
    },
    data() {
        return {
            chengZhengData: [],
            qiYiData: [],
            loading: true,
            loadingText: '加载中...'
        };
    },
    created() {
        this.getDataList();
    },
    mounted() {
        // this.initCharts();
    },
    methods: {
        // 请求接口，获取数据
        getDataList() {
            this.chengZhengData = []
            this.qiYiData = []

            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/dataset/1675755162119278593`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                res.data.data.forEach((element) => {
                    this.chengZhengData.push(element.suozaizhen);
                    this.qiYiData.push(element.count);
                });
                this.loading = false
                console.log(res, "企业分布图");
                this.initCharts();
            });
        },
        // 柱状图
        initCharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main3"));
            // 实现相应式，跟随页面变化
            window.addEventListener("resize", () => {
                myChart.resize();
            });
            // 指定图表的配置项和数据
            var option = {
                // backgroundColor: '#0E2A43',
                tooltip: {
                    show: true,
                    formatter: "{b}:{c}"
                },
                grid: {
                    left: '5%',
                    top: '12%',
                    right: '1%',
                    bottom: '8%',
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    axisTick: {
                        show: false,
                        alignWithLabel: false,
                        length: 5,

                    },
                    "splitLine": { //网格线
                        "show": false
                    },
                    inverse: 'true', //排序
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#fff',
                        }
                    },
                    axisLabel: {
                        interval: 0,//横轴信息全部显示
                        rotate: 30,//-15度角倾斜显示
                    },
                    data: [...this.chengZhengData]
                },
                yAxis: [{
                    type: 'value',
                    show: true,
                    position: 'top',
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                        }
                    },
                    splitLine: {
                        show: false
                    },
                }],
                series: [{
                    name: '能耗值',
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: '{c}家',
                            textStyle: {
                                color: 'white' //color of value
                            }
                        }
                    },
                    itemStyle: {
                        //通常情况下：
                        normal: {
                            barBorderRadius: 8,
                            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params) {
                                var colorList = [
                                    ['#5470c6', 'rgba(11,42,84,.3)'],
                                    ['#91cc75', 'rgba(11,42,84,.3)'],
                                    ['#fac858', 'rgba(11,42,84,.3)'],
                                    ['#1ace4a', 'rgba(11,42,84, 0.3)'],
                                    ['#73c0de', 'rgba(11,42,84, 0.3)'],
                                    ['#3ba272', 'rgba(11,42,84, 0.3)'],
                                    ['#008c8c', 'rgba(11,42,84, 0.3)'],
                                    ['#5470c6', 'rgba(11,42,84, 0.3)'],


                                ];
                                var index = params.dataIndex;
                                if (params.dataIndex >= colorList.length) {
                                    index = params.dataIndex - colorList.length;
                                }
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: colorList[index][0]
                                },
                                {
                                    offset: 1,
                                    color: colorList[index][1]
                                }
                                ]);
                            },
                        },
                    },
                    barGap: '0%',
                    barCategoryGap: '50%',
                    data: [...this.qiYiData]
                }]
            };
            myChart.setOption(option);
        },
    },
};
</script>
   
<style>
#main3 {
    height: 300px;
    /* width: 580px;  */
    box-sizing:
        border-box;
    padding: 5px
}

.bobxxxssw {
    position: relative;
    width: 100%;
    height: 100%;
    /* background-color: #fff; */
}
</style>